<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>影像综合诊断系统</title>
	<link rel="shortcut icon" href="./static/image/favicon.ico">
	<link rel="stylesheet" type="text/css" href="./static/libs/element-ui/index.css">
	<link rel="stylesheet" type="text/css" href="./static/css/public.css">
	<link rel="stylesheet" type="text/css" href="./static/css/m_tailwind.css">
	<link rel="stylesheet" type="text/css" href="./static/css/videoRecord.css">
</head>
<body>

	<div id="app" v-cloak>
		<m-layout>
			<div class="video-record-wp">
				<el-row class="vr-content">
					<el-col class="h-full" :span="4">
						<div class="group" style="height: 70%;">
							<div class="group-title">超声影像截图</div>
							<div class="group-content">
								<el-empty v-if="!form.images.length" :image-size="100"></el-empty>
								<div v-else class="yxjt-list">
									<div v-for="(item, index) in form.images" :key="index" class="item">
										<div v-if="!options.detailId" class="del-btn" title="删除" @click="doDeleteScreen(index)">
											<i class="el-icon-error"></i>
										</div>
										<el-image 
									    style="width: 100%;"
									    :src="item" 
									    fit="contain"
									    :preview-src-list="form.images">
									  </el-image>
									</div>
								</div>
							</div>
						</div>
						<div class="group border-top" style="height: 30%;">
							<div class="group-title">检查记录</div>
							<div class="group-content">
								<el-empty v-if="!historyList.length" :image-size="100"></el-empty>
								<div v-else class="jzjl-list">
									<div v-for="(item, index) in historyList" :key="index" 
										class="item"
										:class="{active: item.id == options.detailId}"
										:style="{cursor: options.detailId ? 'pointer' : 'auto'}"
										@click="() => {
											if(options.detailId) {
												showDetail(item)
											}
										}">
										<div class="left">
											<span>{{switchTime(item.diagnosisTime, 'yyyy-MM-dd&nbsp;&nbsp;HH:mm:ss')}}</span>
											<svg v-if="item.hasVideo" style="width:20px;height:20px;margin-right: 5px;" viewBox="0 0 1024 1024"><path d="M960 192h-28.384c-16.8 0-32.928 6.624-44.928 18.432L800 295.936V256a96 96 0 0 0-96-96H96C43.072 160 0 203.04 0 256v512a96 96 0 0 0 96 96h608c52.992 0 96-43.008 96-96v-39.072l86.688 85.504c12 11.808 28.128 18.432 44.928 18.432H960a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64zM96 800c-17.664 0-32-14.368-32-32V256a32 32 0 0 1 32-32h608c17.632 0 32 14.336 32 32v512c0 17.632-14.368 32-32 32H96z m864-31.136h-32l-128-128V640l-32-32v-192l160-160h32v512.864z"></path></svg>
										</div>
										<!-- <el-link class="btn" type="primary" @click="showDetail(item)">查看详情</el-link> -->
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col class="h-full center" :span="15">
						<div class="h-full flex-col video-box">
							<!-- {{options.name}} -->
							<div class="title">
								<span class="title-text">{{patientDetail.cardID || ''}}</span>
								<span class="title-text">{{patientDetail.name || ''}}</span>
								<!-- <span class="title-text">{{patientDetail.gender_text || ''}}</span> -->
								<!-- <span class="title-text">{{patientDetail.age || ''}}</span> -->

								<div class="extra">
									<i v-if="historySrc" class="text-20 el-icon-error cursor-pointer" title="删除视频" @click="deleteVideo()"></i>
									<div v-if="!options.detailId" class="switch" style="margin-right:80px;">
										<span>保存视频：</span>
										<el-switch v-model="form.isSave" inactive-color="#cccccc" :active-value="options.id" inactive-value="0" @change="changeVideoConfig('isSave')"></el-switch>
										<span class="ml-5">{{form.isSave == 0 ? '关' : '开'}}</span>
									</div>

									<div v-if="!options.detailId" class="switch">
										<span>AI检测：</span>
										<el-switch v-model="form.isInspect" inactive-color="#cccccc" active-value="1" inactive-value="0" @change="changeVideoConfig('isInspect')"></el-switch>
										<span class="ml-5">{{form.isInspect == 1 ? '开' : '关'}}</span>
									</div>
								</div>
							</div>
							<div class="flex-1 h-0 px-20">
								<div class="play-box" 
									v-loading="videoLoading"
									element-loading-text="视频加载中"
							    element-loading-spinner="el-icon-loading"
							    element-loading-background="rgba(0, 0, 0, 0.8)">
							    <div v-if="inspectPart && !options.detailId" class="color-box" :style="{bottom: options.detailId ? '80px' : 0}">
							    	<div v-for="(item, index) in inspectPart.children" :key="index" class="item" :style="{color: item.color}">{{item.label}}</div>
							    </div>
							    <div v-if="showFlowImg && playSrc" ref="videoImgBox" class="show-img-box" :class="{'is-stop': stopSrc}">
							    	<img class="play" ref="videoImg" :src="playSrc" @load="videoLoad"/>
							    	<img class="stop" ref="stopImg" :src="stopSrc"/>
							    </div>
									<template v-else-if="!showFlowImg">
										<video v-if="historySrc" :src="historySrc" controls autoplay muted></video>
										<div v-else class="empty">当前检查记录无历史视频</div>
									</template>
								</div>
							</div>
							<div v-if="historyVideo.length" class="btn-box">
								<el-button v-for="(src, index) in historyVideo" :key="index" 
									:type="src == historySrc ? 'primary' : ''"
									size="mini"
									style="padding: 3px 10px;" 
									@click="changeHistorySrc(src)">
									<div class="flex items-center">
										<!-- <svg style="width:20px;height:20px;" viewBox="0 0 1024 1024"><path d="M896 448c0-212-172-384-384-384S128 236 128 448c0 192.8 142.4 352.8 328 380l-4 68H256v64h512v-64H573.6l-4-68C754.4 800 896 640.8 896 448zM512 768c-176.8 0-320-143.2-320-320s143.2-320 320-320 320 143.2 320 320-143.2 320-320 320z m0-560c-132.8 0-240 107.2-240 240s107.2 240 240 240 240-107.2 240-240-107.2-240-240-240zM416 512c-52.8 0-96-43.2-96-96s43.2-96 96-96 96 43.2 96 96-43.2 96-96 96z" p-id="4268"></path></svg> -->
										<span class="text-16" style="line-height:20px;">{{src.indexOf('-inspect.mp4') == -1 ? '原始视频' : '检测视频'}}</span>
									</div>
								</el-button>
							</div>
						</div>
					</el-col>
					<el-col class="h-full" :span="5">
						<div class="flex-col h-full">
							<div class="group gzsz-box">
								<div class="group-title">阈值设置</div>
								<div class="group-content">
									<el-slider
										style="margin: 0 auto;width:90%;" 
										v-model="form.threshold" 
										:min="0" 
										:max="1" 
										:step="0.01" 
										:marks="{0: '0', 1: '1'}"
										:disabled="options.detailId"
										@change="saveSystemSettings()"></el-slider>
									<div class="text">当前阈值：{{form.threshold}}</div>
								</div>
							</div>
							<div class="group">
								<div class="group-title">检查部位</div>
								<div class="group-content jcbw2-box">
									<div class="list">
										<div v-for="(item, index) in partList" :key="index" class="item" :class="{active: getPartType(item.list)}">
											<el-dropdown split-button type="primary" 
												:class="{disabled: item.disabled ? true : false}"
												@click="choicePartLv1(item.list)">
											  <span v-html="getPartLabel(item.list)"></span>
											  <el-dropdown-menu slot="dropdown">
											    <el-dropdown-item v-for="(bItem, bIndex) in item.list" :key="bIndex"
											    	:style="{fontWeight: bIndex == item.list.length-1 ? '600' : '500'}"
											    	@click.native="changeInspectPart(bItem)">
											    		<div class="part-text" :class="{disabled: bItem.disabled}">{{bItem.label}}</div>
											    	</el-dropdown-item>
											  </el-dropdown-menu>
											</el-dropdown>
										</div>
									</div>
								</div>
							</div>

									
							<div class="flex-1 h-0 group border-top">
								<!-- <div class="group-title">超声影像诊断</div> -->
								<div class="group-content zdjg-box pb-10">
									<div class="title">影像表现：</div>
									<div class="flex-1 h-0">
										<div class="yxbx-list">
											<div v-for="(item, index) in form.inspectResult" :key="index" class="item">{{item.type}}：{{item.data || '无异常'}}</div>
										</div>
									</div>
									<div class="title">诊断结果：</div>
									<div class="flex-1 h-0">
										<el-input v-if="!options.detailId" class="ipt text-16" type="textarea" placeholder="请输入内容" 
											v-model="form.result" 
											resize="none"
											:disabled="options.detailId"
											@keyup.native.stop></el-input>
										<div v-else class="zdjg-text">{{form.result}}</div>
									</div>
									<div v-if="!options.detailId" class="btn-box">
										<el-button class="text-15" style="width: 40%;" type="primary" @click="saveVisitResult()">提 交</el-button>
									</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</m-layout>
	</div>

	<script src="./static/libs/vue2.6.8/vue.min.js"></script>
	<script src="./static/libs/element-ui/index.js"></script>
	<script src="./static/libs/axios.min.js"></script>
	<script src="./static/js/Tools.js"></script>
	<script src="./static/components/common.js"></script>
	<script src="./config/config.js"></script>
	<script src="./static/js/videoRecord.js"></script>
</body>
</html>